<template>
	<view class="pinglun">
		<view class="container">
			<view class="card-4 card">
				<view class="card-title">商品详情</view>
				<view class="goodsbox">
					<view class="item" v-for="(value, index) in info.products" :key="index">
						<image :src="value.image" mode=""></image>
						<view class="card-4-info">
							<view class="row">
								<text>{{ value.title }}</text>
								<text>{{ value.key_vals }}</text>
							</view>
							<view class="row2">
								<text>￥{{ value.price_sale }}</text>
								<text>X{{ value.num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card card-2">
				<view class="" style="padding-bottom: 40rpx">
					<u-rate size="30" :count="5" v-model="form.star"></u-rate>
				</view>
				<u-textarea
					height="208rpx"
					v-model="form.content"
					placeholder="写出您的评价，可以帮助更多小伙伴哦~"
					count
					:maxlength="200"
					placeholder-style="font-size: 24rpx;"
				></u-textarea>
				<view class="upl-box">
					<u-upload width="202rpx" height="198rpx" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple>
						<image class="upl" src="@/static/images/zu5550.png" mode="aspectFit"></image>
					</u-upload>
				</view>
			</view>
		</view>
		<footer-btn :disabled="isDisabled" text="发表评论"  @submit="fbpl"></footer-btn>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'pinglun',
	computed:{
		isDisabled(){
			if(this.form.star === 0){
				return true;
			} else if(uni.$u.test.isEmpty(this.form.content)){
				return true;
			}else{
				return false;
			}
		}
	},
	data() {
		return {
			id: '',
			fileList1: [],
			info: {},
			form: {
				star: 0,
				content: ''
			}
		};
	},
	onLoad(data) {
		this.id = data.id || 110;
		this.init();
	},
	methods: {
		fbpl() {
			let cs = {
				...this.form,
				inventoryId: this.info.products[0].id,
				order_id: this.id
			};

			if (this.fileList1.length === 0) {
				cs.uploadedfile1 = '';
			} else {
				cs.uploadedfile1 = this.fileList1.map((item) => item.url).join('|');
			}

			API.getJson('orders_comment', cs).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					console.log(data);
					uni.showToast({
						title: '评论成功',
						success: () => {
							this.toBack();
						}
					});
				}else{
					uni.showToast({
						title: message,
						icon: 'none',
					});
				}
			});
		},
		init() {
			API.getJson('orders_detail', { id: this.id }).then((res) => {
				const { code, data, msg } = res;
				if (code === 1) {
					this.info = data;
					console.log(data);
				}
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				let result = {};
				try {
					result = await this.uploadFilePromise(lists[i].url);
				} catch (e) {
					//TODO handle the exception
					this[`fileList${event.name}`].splice(fileListLen, 1);
					return;
				}
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(file) {
			return new Promise((resolve, reject) => {
				API.getUpload('index_ossupload', file, {}).then((res) => {
					if (res.code !== 1) {
						reject(res.data);
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						return;
					}
					resolve(res.data);
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.pinglun {
	.card-2 {
		.upl-box {
			margin-top: 24rpx;
			.upl {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
	.container {
		padding: 24rpx 32rpx;
	}
	.card-4 {
		.goodsbox {
			.item + .item {
				margin-top: 16rpx;
			}
			.item {
				display: flex;
				& > image {
					width: 144rpx;
					height: 144rpx;
					background: #f8f8f8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.card-4-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 24rpx;
					& > .row {
						flex: 1;
						width: 100%;
						display: flex;
						flex-direction: column;
						text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						text:nth-of-type(2) {
							margin-top: 8rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					.row2 {
						.flex-between();
						text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						text:nth-of-type(2) {
							font-size: 24rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
	}

	.card + .card {
		margin-top: 16rpx;
	}
	.card {
		padding: 34rpx 24rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.card-title {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}
	}
}
</style>
